<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">
    
    <ui:define name="head">
        <script type="text/javascript">
            function handleLoginRequest(xhr, status, args) {
                if(args.validationFailed || !args.loggedIn) {
                    PF('dlg').jq.effect("shake", {times:5}, 100);
                }
                else {
                    PF('dlg').hide();
                    $('#loginLink').fadeOut();
                }
            }
        </script>
    </ui:define>

    <ui:define name="title">
        Dialog - <span class="subitem">Login Demo</span>
    </ui:define>

    <ui:define name="description">
        This example demonstrates how to create a login dialog. Correct combination is (admin-admin)
    </ui:define>

    <ui:param name="documentationLink" value="/components/dialog" />

    <ui:define name="implementation">

        <h:form>        
            <h:outputLink value="javascript:void(0)" onclick="PF('dlg').show();" title="login">
                <p:graphicImage name="/demo/images/login.png" />
            </h:outputLink>
            
            <p:growl id="growl" sticky="true" showDetail="true" life="3000" />
            
            <p:dialog header="Login" widgetVar="dlg" resizable="false">
                <h:panelGrid columns="2" cellpadding="5">
                    <h:outputLabel for="username" value="Username:" />
                    <p:inputText id="username" value="#{userLoginView.username}" required="true" label="username" />
                    
                    <h:outputLabel for="password" value="Password:" />
                    <p:password id="password" value="#{userLoginView.password}" required="true" label="password" />
                    
                    <f:facet name="footer">
                        <p:commandButton value="Login" update="growl" action="#{userLoginView.login}"
                                         oncomplete="handleLoginRequest(xhr, status, args)" />
                    </f:facet>  
                </h:panelGrid>
            </p:dialog>    
        </h:form>
        
    </ui:define>

</ui:composition>
